import { Box, Button, FormControlLabel, Radio, RadioGroup, TextField } from '@mui/material';
import React, { JSX } from 'react';
import SaveIcon from '@mui/icons-material/Save';
import KeyIcon from '@mui/icons-material/Key';
import { useAppDispatch, useAppSelector } from '../../actions/hooks';
import { profileActions, selectGender, selectName, selectPasswordUpdated, selectProfileLoaded, selectProfileUpdated, selectRole, selectUid, selectUserName } from '../../actions/PersonalInformation';
import ResetPasswordDialog from './ResetPasswordDialog';
import { Gender } from '../../types';
import AlertBox from '../../components/AlertBox';


function PersonalInformation(): JSX.Element {

  const uid = useAppSelector(selectUid);
  const name = useAppSelector(selectName);
  const userName = useAppSelector(selectUserName);
  const gender = useAppSelector(selectGender);
  const role = useAppSelector(selectRole);
  const profileLoaded = useAppSelector(selectProfileLoaded);
  const passwordUpdated = useAppSelector(selectPasswordUpdated);
  const profileUpdated = useAppSelector(selectProfileUpdated);

  const dispatch = useAppDispatch();

  const [displayName, setDisplayName] = React.useState<string>('');
  const [displayGender, setDisplayGender] = React.useState<Gender>(Gender.Unknown);
  const [openResetPassword, setOpenResetPassword] = React.useState<boolean>(false);

  const handleResetPassword = () => {
    setOpenResetPassword(true);
  };

  React.useEffect(() => {
    if (!profileLoaded) {
      dispatch(profileActions.getProfile());
    }
  }, [profileLoaded, dispatch]);

  React.useEffect(() => {
    setDisplayName(name);
  }, [name]);

  React.useEffect(() => {
    setDisplayGender(gender);
  }, [gender]);

  const handleSaveChanges = () => {
    dispatch(profileActions.updateProfile({
      name: displayName,
      gender: displayGender
    }));
  };

  return (
    <>
      <Box sx={{ padding: '30px 30px 30px 30px', flex: 'none', flexGrow: 1 }}>
        <Box sx={{ width: '70%' }}>
          <Box sx={{
            fontFamily: 'Open Sans',
            fontStyle: 'normal',
            fontWeight: 600,
            fontSize: '22px',
            lineHeight: '125%',
            width: '100%'
          }}>
            Personal Information
          </Box>
        </Box>
        <Box sx={{
          marginTop: '30px', fontFamily: 'Open Sans', fontWeight: 600,
          fontSize: '22px', display: 'flex', flexDirection: 'row', width: '100%'
        }}>
          {name}&nbsp;&nbsp;(@{userName})
        </Box>
        <Box sx={{ marginTop: '30px', height: '40px', fontFamily: 'Open Sans', fontSize: '16px', display: 'flex', flexDirection: 'row', width: '100%' }}>
          <Box sx={{ width: '140px', paddingTop: '10px', paddingBottom: '10px', fontWeight: 600, color: '#596A7C' }}>UID</Box>
          <Box sx={{ width: '350px', paddingTop: '10px', paddingBottom: '10px' }}>{uid}</Box>
        </Box>
        <Box sx={{ marginTop: '20px', height: '40px', fontFamily: 'Open Sans', fontSize: '16px', display: 'flex', flexDirection: 'row', width: '100%' }}>
          <Box sx={{ width: '140px', paddingTop: '10px', paddingBottom: '10px', fontWeight: 600, color: '#596A7C' }}>User Name</Box>
          <TextField sx={{ width: '350px' }} disabled={true} value={userName} size='small' />
        </Box>
        <Box sx={{ marginTop: '20px', height: '40px', fontFamily: 'Open Sans', fontSize: '16px', display: 'flex', flexDirection: 'row', width: '100%' }}>
          <Box sx={{ width: '140px', paddingTop: '10px', paddingBottom: '10px', fontWeight: 600, color: '#596A7C' }}>Name</Box>
          <TextField sx={{ width: '350px' }} value={displayName} onChange={(event) => { setDisplayName(event.target.value); }} size='small' />
        </Box>
        <Box sx={{ marginTop: '20px', height: '40px', fontFamily: 'Open Sans', fontSize: '16px', display: 'flex', flexDirection: 'row', width: '100%' }}>
          <Box sx={{ width: '140px', paddingTop: '10px', paddingBottom: '10px', fontWeight: 600, color: '#596A7C' }}>Gender</Box>
          <RadioGroup
            row sx={{ width: '350px' }}
            value={displayGender}
            onChange={(event, value) => { setDisplayGender(parseInt(value)); }}
          >
            <FormControlLabel value={Gender.Male} control={<Radio />} label='Male' sx={{ marginRight: '40px' }} />
            <FormControlLabel value={Gender.Female} control={<Radio />} label='Female' />
          </RadioGroup>
        </Box>
        <Box sx={{ marginTop: '20px', height: '40px', fontFamily: 'Open Sans', fontSize: '16px', display: 'flex', flexDirection: 'row', width: '100%' }}>
          <Box sx={{ width: '140px', paddingTop: '10px', paddingBottom: '10px', fontWeight: 600, color: '#596A7C' }}>Role</Box>
          <Box sx={{ width: '350px', paddingTop: '10px', paddingBottom: '10px' }}>{role}</Box>
        </Box>
        <Box sx={{ marginTop: '50px', height: '40px', fontFamily: 'Open Sans', fontSize: '16px', display: 'flex', flexDirection: 'row', width: '100%' }}>
          <Button
            variant='contained' startIcon={<SaveIcon />}
            sx={{ boxShadow: 'none', textTransform: 'none', width: '235px', marginRight: '20px' }}
            onClick={handleSaveChanges}
          >
            Save Changes
          </Button>
          <Button
            variant='outlined' startIcon={<KeyIcon />}
            sx={{ boxShadow: 'none', textTransform: 'none', width: '235px' }}
            onClick={handleResetPassword}
          >
            Reset Password
          </Button>
        </Box>
      </Box>
      <ResetPasswordDialog
        open={openResetPassword}
        onClose={() => { setOpenResetPassword(false); }}
      />
      <AlertBox
        open={passwordUpdated}
        severity="success"
        title="Success"
        message="Password successfully updated."
        autoHideDuration={3000}
        onClose={() => { dispatch(profileActions.clearPasswordUpdated()); }}
      />
      <AlertBox
        open={profileUpdated}
        severity="success"
        title="Success"
        message="Profile successfully updated."
        autoHideDuration={3000}
        onClose={() => { dispatch(profileActions.clearProfileUpdated()); }}
      />
    </>
  );
}

export default PersonalInformation;